import React, { useEffect, useState, useCallback, useRef } from 'react'
import {Form, Button} from 'antd'

import config from 'src/commons/config-hoc';
import PageContent from "src/layouts/page-content";
import {
  QueryBar,
  FormRow,
  FormElement,
  Table,
  Operator,
  Pagination,
} from 'src/library/components';
import EditModal from './EditModal'
import {usePost} from 'src/commons/ajax';

// id	string	#
// name	string	分类名称
// pid	integer	父类id
// icon	string	图标
// path	string	路径
// sort	integer	排序
// status	integer	状态


const ShopsComp = config({
  path: "/shops",
  title: "商品列表",
  ajax: true,
  router: true
})((props) => {
  const { ajax, router, history } = props
  const [loading, setLoading] = useState(false)
  const [loadingRoleMenu, setLoadingrolemenu] = useState(false)
  const [shops, setShops] = useState([])
  const [pid, setPid] = useState(0)
  const [keyword, setKeyword] = useState('')
  const [page, setPage] = useState(1)
  const [pageSize, setPagesize] = useState(10)
  const [total, setTotal] = useState(0)
  const [id, setId] = useState(null)
  const [visible, setVisible] = useState(false)
  const [formdata, setFormdata] = useState({})
  const [deleting, delSpec] = usePost('/admin/goods/delete', {successTip: '删除成功！'});
  const form = useRef(null)

  console.log(router, 'router')

  const columns = [
    // { title: 'id', dataIndex: 'id' },
    { title: '排序id', dataIndex: 'sort' },
    { title: '分类id', dataIndex: 'category_id' },
    { title: '商品名称', dataIndex: 'title' },
    { title: '库存', dataIndex: 'stock' },
    { title: '生产日期', dataIndex: 'production_time' },
    { title: '状态', dataIndex: 'status' },
    { title: '分类名称', dataIndex: 'category_name' },
    {
      title: '操作', dataIndex: 'status',
      render: (value, row) => {
        const items = [
          {
            label: `修改 ${row.name}`,
            onClick: () => {setId(row.id);setFormdata(row);setVisible(true) },
          },
          {
            label: '删除',
            color: 'red',
            confirm: {
              title: `您确定删除"${row.name}"?`,
              onConfirm: () => handleDelete(row.id),
            },
          },
          {
            label: '规格属性列表',
            onClick: () => {history.push('/specs/_/detail/'+1)}
          }
        ];
  
        return <Operator items={items} />;
      },
    },
  ];
  

  useEffect(() => {
    getShops()
  }, [page, keyword])

  const getShops = useCallback(async () => {
    const { keyword } = form ? form.current.getFieldsValue() : {}
    let data = {
      keyword,
      page
    }
    const res = await ajax.get('admin/goods/list', data, { noEmpty: true })
    console.log(res.data, 'data');
    if (res.code === 200) {
      setShops(res.data.data)
      setTotal(res.data.total)
    } else {
      setShops([])
      setTotal(0)
      setPage(1)
    }
  }, [keyword, page])

  const handleDelete = useCallback((id) => {
    delSpec({id})
    getShops()
  }, [keyword, page])

  return <PageContent loading={loading || loadingRoleMenu}>
    <QueryBar>
      <Form onFinish={() => {setPage(1);getShops()}} ref={form}>
        <FormRow>
          <FormElement
            label="关键词"
            name="keyword"
          />
          <FormElement layout>
            <Button type="primary" htmlType="submit">提交</Button>
            <Button onClick={() => { form.current.resetFields();getShops()}}>刷新</Button>
            <Button type="primary" onClick={() => {setId(null);setVisible(true)} }>添加</Button>
          </FormElement>
        </FormRow>
      </Form>
    </QueryBar>
    <Table
      loading={loading}
      columns={columns}
      dataSource={shops}
      rowKey="id"
      serialNumber
      pageNum={page}
      pageSize={pageSize}
    />

    <Pagination
      total={total}
      pageNum={page}
      pageSize={pageSize}
      onPageNumChange={pageNum => {setPage(pageNum)}}
    />
  <EditModal 
    formdata={formdata} 
    visible={visible}
    id={id} 
    isEdit={id != null ? true : false} 
    onCancel={() => setVisible(false)} 
    onOk={() => {setVisible(false);getShops()}}
    />

    
  </PageContent>
})

export default ShopsComp